<!--
 * new page
 * @author: YK
 * @since: 2023-12-14
 * index.vue
-->
<template>
  <div class="container">
    <!-- <m-menus :data="data" :defaultActive="'1'"  text-color="red" ></m-menus> -->
    <m-infinite-menus
      :data="data"
      :defaultActive="'1'"
      text-color="blue"
    ></m-infinite-menus>
  </div>
</template>

<script setup lang="ts">
const data = [
  {
    name: "首页",
    index: "1",
    icon: "Document",
  },
  {
    name: "首页2",
    index: "2",
    icon: "Document",
  },
  {
    name: "首页3",
    index: "3",
    icon: "Document",
  },
  {
    name: "首页4",
    index: "4",
    icon: "Document",
    children: [
      {
        name: "首页4-1",
        index: "4-1",
        icon: "Document",
        children: [
          {
            name: "首页4-1-1",
            index: "4-1-1",
            icon: "Document",
            children: [
              {
                name: "首页4-1-1-1",
                index: "4-1-1-1",
                icon: "Document",
              },
            ],
          },
        ],
      },
      {
        name: "首页4-2",
        index: "4-2",
        icon: "Document",
      },
      {
        name: "首页4-3",
        index: "4-3",
        icon: "Document",
      },
    ],
  },
];
</script>

<style scoped lang="scss">

</style>
